//获取操作对象
var box = document.querySelector('.g-main');
//  var boxImg=document.querySelector(".l-bot");
var gud = document.querySelector(".lbgud");
var imgs = gud.querySelectorAll(".l-bot");
//  console.log(imgs)
var lis = document.querySelectorAll(".ltt>ul>li");
var leftBtn = document.querySelector(".l-left>a.leftBtn");
var rightBtn = document.querySelector(".l-left>a.rightBtn");

var bool = true //判断图片是否可以继续切换，true：可以，false：不可以
//创建定时器名称
var dsq1, dsq2
//创建图片下标
var imgIndex = 1
//创建按钮下标
var btnIndex = 0
//获取当前图片的宽度
var imgW = imgs[0].offsetWidth
//打开页面时，直接显示第二个图片
//  boxImg.scrollLeft=imgIndex*imgW
gud.scrollLeft = imgIndex * imgW

//图片切换
function autoMove() {
    imgIndex++
    btnIndex++
    //判断图片下标是否大于6
    if (imgIndex > 5) {
        //把当前位置立即切换到第二张图片上
        // boxImg.scrollLeft=875
        gud.scrollLeft = 875
        imgIndex = 2
    }
    //清空所有li的class属性值
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = ''
    }
    //判断按钮下标是否大于4
    if (btnIndex > 3) {
        btnIndex = 0
    }
    // console.log(btnIndex);
    //让图片对应的按钮添加class属性值
    lis[btnIndex].className = 'act'

    //调用运动函数，让图片在切换的时候有滑动效果
    move()
}
//使用定时器，每间隔3秒调用autoMove()
dsq1 = setInterval(autoMove, 3000)
//给大盒子对象绑定鼠标移入移出事件
gud.onmouseover = function () {
    //停止图片切换
    clearInterval(dsq1)
}
gud.onmouseout = function () {
    //重新启动定时，进行图片切换
    dsq1 = setInterval(autoMove, 3000)
}
//给右边按钮绑定点击事件
rightBtn.onclick = function () {
    clearInterval(dsq1)
    if (bool) {
        bool = false
        // console.log(bool);
        //调用autoMove()切换图片
        autoMove()
    }
}
//onvisibilitychange：当浏览器窗口最小化时，停止轮播；打开浏览器时，启动轮播
document.onvisibilitychange = function () {
    var bb = document.hidden
    if (bb) {
        //停止切换
        clearInterval(dsq1)
    } else {
        //重新启动定时，进行图片切换
        dsq1 = setInterval(autoMove, 3000)
    }
}
 //给左边按钮绑定点击事件
leftBtn.onclick = function () {
    clearInterval(dsq1)
    if (bool) {
        bool = false
        imgIndex--
        btnIndex--
        //判断图片下标是否大于6
        if (imgIndex < 0) {
            //把当前位置立即切换到倒数第二张图片上
            //  boxImg.scrollLeft=(imgs.length-2)*imgW
            gud.scrollLeft = (imgs.length - 2) * imgW
            imgIndex = imgs.length - 3
        }
        //清空所有li的class属性值
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = ''
        }
        //判断按钮下标是否大于4
        if (btnIndex < 0) {
            btnIndex = 3
        }
        //让图片对应的按钮添加class属性值
        lis[btnIndex].className = 'act';
        //调用运动函数，让图片在切换的时候有滑动效果
        move()
    }
}
//遍历每个数字按钮
for (let i = 0; i < lis.length; i++) {
    //给每个li对象绑定点击事件
    lis[i].onclick = function () {
        //直接把当前li的下标赋值给btnIndex
        btnIndex = i
        imgIndex = i + 1
        //调用运动函数
        move()
        //清空所有li的class属性值
        for (var a = 0; a < lis.length; a++) {
            lis[a].className = ''
        }
        //给指定的li对象添加class属性值
        lis[btnIndex].className = 'act'
    }
}
//运动函数
function move() {
    //获取开始位置，也就是当前位置
    // var start=boxImg.scrollLeft
    var start = gud.scrollLeft
    //获取结束位置，也就是将要到达的位置
    var end = imgIndex * imgW
    //设置开始步数
    var a1 = 0
    //设置结束步数
    var b1 = 20
    //设置步长
    var speed = (end - start) / 20
    //清除定时器
    clearInterval(dsq2)
    //创建定时器
    dsq2 = setInterval(function () {
        a1++
        if (a1 >= b1) {
            clearInterval(dsq2)
            //图片切换完毕时，把bool变为true
            bool = true
        }
        //把计算结果重新赋值给start
        start = start + speed
        //让当前位置进行移动
        // boxImg.scrollLeft=start
        gud.scrollLeft = start
    }, 30)
}
